﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>validate user input by jQuery Validation plugin</title>
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/jquery.validate_messages_zh.js"></script>
    <!-- coustom validate js -->
    <script src="Scripts/Common/CustomJqValidate.js"></script>
    <style>
        .succuss-status{
            color:green;
            padding-left:15px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("form").validate({
                submitHandler: function(form) {
                    // do other things for a valid form
                    //var a = $(":input[type!='submit']");

                    //$("form").find("span.succuss-status").remove();

                    //$("form").find(":input").each(function () {

                    //    if($(this).attr('type') !='submit' && $(this).attr('type') !='hidden'){                           
                    //        $(this).after("<span class='succuss-status'>√</span>");
                    //    }
                    //});
                     form.submit();                    
                },
                debug: true,
                rules: {
                    numric:{
                        required:true,
                        number:true
                    },
                    username: {
                        af:['a','f']
                    },
                    dt: {
                        dateISO:true
                    }
                },
                message: {
                    numric:{
                        required:"必填项",
                        number:"必须为number类型"
                    },
                    username:{
                        af:"af validate"
                    },
                    dt:{
                        dateISO:"请输入有效的日期"
                    }
                },
                success: function(label){                    
                    label.html("√").addClass("succuss-status");
                }
            });
        })
    </script>
</head>
<body>
    <form action="Ajax/ValidateAjax.ashx" method="post">
        <input type="text" name="numric" /><br />
        <input type="text" name="username" /><br />
        <input type="text" name="dt" /><br />
        <input type="submit" />
    </form>
</body>
</html>
